<!-- 分机列表 -->
<template>
	<view>
		<view class="no-warpper" v-if="isLong">
			<!-- 有数据 渲染列表 -->
			<view v-if="hasInfo">
				<view class="scroll-box">
					<view class="nl-shadow-box card-box" v-for="(item,index) in list" :key="index">
						<view class="nl-flex-list">
							<view class="content">
								<view class="item">
									<view>楼栋编号</view>
									<text>：</text>
									<view>{{item.buildingNo}}</view>
								</view>
								<view class="item">
									<view>单元编号</view>
									<text>：</text>
									<view>{{item.cellNo}}</view>
								</view>
								<view class="item">
									<view>是否在线</view>
									<text>：</text>
									<view :style="{color: item.online?'green':'red'}">{{item.online?'是':'否'}}</view>
								</view>
								<view class="item">
									<view>分机设备码</view>
									<text>：</text>
									<view>{{item.deviceCode}}</view>
								</view>
								<view class="item">
									<view>设备位置</view>
									<text>：</text>
									<view>{{item.position}}</view>
								</view>
							</view>
						</view>
					</view>
					
					<u-loadmore :status="status" />
				</view>
			</view>
			<!-- 无数据 渲染缺省图 -->
			<view v-if="hasInfo == false">
				<noData :noDataText="noDataText"></noData>
			</view>
		</view>
		<view v-else>
			<netError v-if="!hasNet" @refresh="refresh()"></netError>
		</view>
	</view>

</template>

<script>
	import {
		getExtensionList,
		getDigitalBuildingList
	} from 'api/treasure';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				listBox: [], // 避免上拉刷新时，页面出现空白
				list: [],
				status: 'loadmore',

				isLong: false, // 是否加载完成
				hasNet: true, // 是否有网络
				hasInfo: '', // 是否有数据
				noDataText: '暂无数据~',
				conditions:{ buildingNo: ''}, //查询条件
				buildingList: [],//楼栋列表
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		onLoad() {
			this.getDigitalBuildingList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.listBox = []
			this.getExtensionList()
		},
		onReachBottom() {
		},
		methods: {
			/**
			 * 获取楼栋
			 */
			getDigitalBuildingList() {
				var that = this
				const data = {
					communityId: this.userCommunity.communityId
				}
				getDigitalBuildingList(data).then((res) => {
					console.log('获取楼栋', res)
					if (res.code == 500) { //暂无数据
						that.hasInfo = false
						that.isLong = true;
						uni.hideLoading()
						uni.stopPullDownRefresh()
						return;
					}
					if (res.code == 200) {
						that.buildingList = res.data
						that.conditions.buildingNo = that.buildingList[0].buildingNo
						that.getExtensionList()
					}
				}).catch(function(reason) {
					uni.stopPullDownRefresh()
					// 处理网络错误
					that.hasNet = false
					that.isLong = false
				})
			},
			/**
			 * 获取分机列表
			 */
			getExtensionList() {
				var that = this
				const data = {
					communityId: this.userCommunity.communityId,
					buildingNo:this.conditions.buildingNo
				}
				getExtensionList(data).then((res) => {
					console.log('获取分机列表', res)
					if (res.code == 500 && res.msg == '无社区设备') { //暂无数据
						that.hasInfo = false
						that.isLong = true;
						uni.hideLoading()
						uni.stopPullDownRefresh()
						return;
					}
					if (res.code == 200) {
						that.status = 'nomore';
						uni.stopPullDownRefresh()
						for (let i of res.data[0].devices) {
							that.listBox.push(i)
						}

						that.list = that.listBox
					}
					that.isLong = true
					that.hasInfo = true
				}).catch(function(reason) {
					uni.stopPullDownRefresh()
					// 处理网络错误
					that.hasNet = false
					that.isLong = false
				})
			},
			/**
			 * 刷新
			 */
			refresh() {
				this.list = []
				this.getExtensionList()
			},
		}
	}
</script>

<style lang="scss">
	.card-box .content{
		background: none;
	}
	.scroll-box {
		width: 100%;
		padding-bottom: 32rpx;
	}
	.card-box .content .item view:nth-child(1){
		width: 150rpx;
	}
</style>
